<template>
    <div class="content">
        <div class="detail">
            <div class="detail-item">
                <h3>
                    <a name="info" class="title">基本信息</a>
                </h3>
                <div class="di-info">
                    <div class="dii-item">籍&emsp;&emsp;贯：</div>
                    <div class="dii-item">出生年月：</div>
                </div>
                <div class="di-info">
                    <div class="dii-item">电&emsp;&emsp;话：</div>
                    <div class="dii-item">邮&emsp;&emsp;箱：</div>
                </div>
            </div>
            <div class="detail-item">
                <h3>
                    <a name="edu" class="title">教育背景</a>
                </h3>
                <div class="di-info">
                    <div class="dii-item">北京理工大学珠海学院</div>
                    <div class="dii-item">计算机科学与技术</div>
                    <div class="dii-item">本科</div>
                    <div class="dii-item">2014.09-2018.06</div>
                </div>
            </div>
            <div class="detail-item">
                <h3>
                    <a name="skill" class="title">专业技能</a>
                </h3>
                <div class="di-info">
                    <div class="dii-skill">
                        HTML
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="dii-skill">
                        CSS
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 85%"></div>
                        </div>
                    </div>
                </div>
                <div class="di-info">
                    <div class="dii-skill">
                        JavaScript
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 70%"></div>
                        </div>
                    </div>
                    <div class="dii-skill">
                        PHP
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 90%"></div>
                        </div>
                    </div>
                </div>
                <div class="di-info">
                    <div class="dii-skill">
                        Laravel
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="dii-skill">
                        ThinkPHP
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 80%"></div>
                        </div>
                    </div>
                </div>
                <div class="di-info">
                    <div class="dii-skill">
                        MySQL
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="dii-skill">
                        Redis
                        <div class="diis-progress-box">
                            <div class="diis-progress" style="width: 60%"></div>
                        </div>
                    </div>
                </div>
                <div class="di-info">
                    <div class="dii-item">
                        其它：
                    </div>
                </div>
            </div>
            <div class="detail-item">
                <h3>
                    <a name="jobs" class="title">工作经历</a>
                </h3>
                <div class="di-jobs">
                    <div class="di-jobs-info">
                        <div class="dii-company">广州画大饼网络科技有限公司</div>
                        <div class="dii-position">打杂工程师</div>
                        <div class="dii-time">2020.03 - 至今</div>
                    </div>
                    <div class="di-jobs-content">
                        Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，
                        非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
                    </div>
                </div>
                <div class="di-jobs">
                    <div class="di-jobs-info">
                        <div class="dii-company">广州画大饼网络科技有限公司</div>
                        <div class="dii-position">打杂工程师</div>
                        <div class="dii-time">2020.03 - 至今</div>
                    </div>
                    <div class="di-jobs-content">
                        Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，
                        非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
                    </div>
                </div>
                <div class="di-jobs">
                    <div class="di-jobs-info">
                        <div class="dii-company">广州画大饼网络科技有限公司</div>
                        <div class="dii-position">打杂工程师</div>
                        <div class="dii-time">2020.03 - 至今</div>
                    </div>
                    <div class="di-jobs-content">
                        Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，
                        非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
                    </div>
                </div>
                <div class="di-jobs">
                    <div class="di-jobs-info">
                        <div class="dii-company">广州画大饼网络科技有限公司</div>
                        <div class="dii-position">打杂工程师</div>
                        <div class="dii-time">2020.03 - 至今</div>
                    </div>
                    <div class="di-jobs-content">
                        Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，
                        非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
                    </div>
                </div>
                <div class="di-jobs">
                    <div class="di-jobs-info">
                        <div class="dii-company">广州画大饼网络科技有限公司</div>
                        <div class="dii-position">打杂工程师</div>
                        <div class="dii-time">2020.03 - 至今</div>
                    </div>
                    <div class="di-jobs-content">
                        Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，
                        非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
                    </div>
                </div>
            </div>
            <div class="detail-item">
                <h3>
                    <a name="project" class="title">项目经验</a>
                </h3>
                <div class="di-project">
                    <div class="di-project-info">
                        <div class="dii-project-name">XXX商城项目</div>
                        <div class="dii-project-time">2020.03 - 至今</div>
                    </div>
                    <div class="di-project-skills">
                        <div>html</div>
                        <div>css</div>
                        <div>javascript</div>
                    </div>
                    <p class="di-project-desc">
                            Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，
                            非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
                    </p>
                    <ul class="di-project-content">
                        <li>html用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                        <li>css用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                        <li>javascript用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                    </ul>
                </div>
                <div class="di-project">
                    <div class="di-project-info">
                        <div class="dii-project-name">XXX回收项目</div>
                        <div class="dii-project-time">2020.10 - 至今</div>
                    </div>
                    <div class="di-project-skills">
                        <div>html</div>
                        <div>css</div>
                        <div>javascript</div>
                    </div>
                    <p class="di-project-desc">
                            Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，
                            非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
                    </p>
                    <ul class="di-project-content">
                        <li>html用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                        <li>css用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                        <li>javascript用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                    </ul>
                </div>
            </div>
            <div class="detail-item">
                <h3>
                    <a name="evaluate" class="title">自我评价</a>
                </h3>
                <ul class="di-project-content">
                    <li>html用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                    <li>css用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                    <li>javascript用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                </ul>
            </div>
            <div class="detail-item">
                <h3>
                    <a name="others" class="title">其它</a>
                </h3>
                <ul class="di-project-content">
                    <li>html用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                    <li>css用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                    <li>javascript用户界面的渐进式框架。与其他重量级框架不同的是，</li>
                </ul>
            </div>
            <div class="detail-item">
                <h3>
                    <a name="works" class="title">作品</a>
                </h3>
                <div class="di-works">
                    <a href="" class="diw-item">
                        <img class="diwi-img" src="../../..//assets/avatar.jpg"/>
                        <p>XXX保密项目</p>

                    </a>
                    <a href="" class="diw-item">
                        <img class="diwi-img" src="../../..//assets/avatar.jpg"/>
                        <p>XXX保密项目</p>

                    </a>
                    <a href="" class="diw-item">
                        <img class="diwi-img" src="../../..//assets/avatar.jpg"/>
                        <p>XXX保密项目</p>

                    </a>
                    <a href="" class="diw-item">
                        <img class="diwi-img" src="../../..//assets/avatar.jpg"/>
                        <p>XXX保密项目</p>

                    </a>
                    <a href="" class="diw-item">
                        <img class="diwi-img" src="../../..//assets/avatar.jpg"/>
                        <p>XXX保密项目</p>

                    </a>
                </div>
            </div>

        </div>
        <div class="footer">
            Copyright © 1996-2021 lauwen ·
            <a href="https://beian.miit.gov.cn/" target="_blank" title="工信部·ICP/IP地址/域名信息备案管理系统">粤ICP备17036588号</a>
        </div>
    </div>

</template>

<script>
    export default {
        name: "ResumeContent"
    }
</script>

<style scoped>
    .content {
        flex-grow: 1;
        height: 100%;
        margin: 0 8px;
        box-sizing: border-box;
        /*padding: 20px 15px;*/
        border-radius: 3px;
        overflow-x: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }

    .content::-webkit-scrollbar {
        width: 0 !important
    }

    .detail {
        background-color: white;
        padding: 25px 15px;
    }
    .detail-item{
        width: 100%;
        /*height: 500px;*/
        /*border-bottom: 1px solid #d3d4d6;*/
        margin: 15px 0;
        padding: 0px 15px;
        box-sizing: border-box;
    }
    .detail-item:first-child{
        margin-top: 0;
    }
    .detail-item h3{
        text-align: left;
        margin-bottom: 15px;
        margin-top: 20px;
        color: #515a6e;
    }
    .detail-item:first-child h3{
        margin-top: 0;
    }
    .detail-item h3>a{
        padding-top: 15px;
        text-decoration: none;
    }
    .di-info{
        display: flex;
    }
    .dii-item{
        flex-grow: 1;
        text-align: left;
        font-size: 14px;
        line-height: 30px;
    }
    .dii-skill{
        width: 50%;
        text-align: left;
        font-size: 14px;
        line-height: 30px;
        box-sizing: border-box;
        padding: 10px 15px 10px 0;
    }
    .dii-skill .diis-progress-box{
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background-color: #dcdee2;
    }
    .dii-skill .diis-progress{
        height: 4px;
        border-radius: 2px;
        background-color: #409eff;
    }
    .di-jobs, .di-project{
        margin-bottom: 12px;
    }
    .di-jobs:last-child, .di-project:last-child{
        margin-bottom: 0;
    }
    .di-jobs-info, .di-project-info{
        display: flex;
    }
    .di-jobs-info, .di-project-info div{
        font-weight: bold;
        color: #337ab7;
        text-align: left;
    }
    .dii-company, .dii-project-name{
        flex-grow: 1;
    }
    .dii-position{
        width: 30%;
    }
    .dii-time, .dii-project-time{
        width: 25%;
    }
    .di-jobs-content{
        text-indent: 2rem;
        padding: 8px 0;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: .5px;
        text-align: left;
    }
    .di-project-skills{
        display: flex;
        margin: 3px 0;
    }
    .di-project-skills>div{
        margin-right: 8px;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: bold;
        color: white;
        background-color: #2d8cf0;
        border-radius: 5px;
    }
    .di-project-desc{
        text-indent: 2rem;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: .5px;
        text-align: left;
        margin: 8px 0 4px 0;
    }
    .di-project-content{
        margin-top: 0;
    }
    .di-project-content>li{
        text-align: left;
        font-size: 14px;
        padding: 6px 0;
    }
    .di-works{
        display: flex;
        flex-wrap: wrap;
    }
    .diw-item{
        width: 25%;
        padding: 0 15px;
        margin-bottom: 15px;
        box-sizing: border-box;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        color: #515a6e;
    }
    .diw-item>img{
        height: 100px;
        border-radius: 6px;
    }
    .diw-item>p{
        text-align: left;
        margin: 6px 0;
    }


    .footer {
        margin: 15px 0;
        font-size: 14px;
    }

    .footer a {
        text-decoration: none;
        font-size: 14px;
    }

    .footer a:hover {
        color: orangered;
    }
</style>